<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/commonLayUI :: common_head_LayUi(~{::title},~{},~{})">
  <meta charset="UTF-8">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" th:href="@{/static/global/plugins/elementUI/index.css}">
  <title>index</title>
</head>
<style>
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: right;
    line-height: 800px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: right;
    line-height: 800px;
  }
</style>
<body>
<div id="app" onselectstart="return false">
  <div style="text-align: left;margin-left: 5px"><h4>数据质量标准管理</h4></div>
  <div class="layui-container">
    <div class="layui-row" style="margin-left: -40px;margin-top: 15px">
      <div class="layui-col-md1">
        <div class="layui-inline" style="margin-left: -100px;">
          <input class="layui-input" type="text" lay-verify="" id="tree_id" name="tree_id"
                 placeholder="ID" autocomplete="off" style="display: none">
        </div>
        <!--渲染左侧视图树-->
        <div id="initTreeDocument" style="margin-left: -150px"></div>
      </div>
      <div class="layui-col-md11">
        <!--渲染右侧视图-->
        <iframe id="iframe" src="/qa/biaozhun/formalSJBZ" width="100%" height="800px" frameborder="0">

        </iframe>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" th:inline="javascript">
  var contentPath = /*[[@{/}]]*/ '';
  layui.use(['tree', 'form', 'layer'], function () {
    var tree = layui.tree;
    var layer = layui.layer;
    var form = layui.form;
    //监听提交
    form.on('submit(submitForm)', function (data) {
      let sendData = JSON.stringify(data.field);
      axios.post('/biaozhun/biaozunAdd', sendData, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(resp => {
        if (resp.data.code == 200) {
          $('#layer-open-Mulu').style.display = 'none';
          /*延迟回去*/
          layer.msg(resp.data.msg, {icon: 1, time: 1000}, function () {
            layer.close('layui-layer-insertMuLu');
          })
        }
      }).catch(error => {
        console.log(error)
      });
      return true;
    });
    // 渲染下拉框
    selectLoad();
    // 渲染树形菜单
    var inst1 = tree.render({
      elem: '#initTreeDocument', //绑定元素
      id: 'TreeDocument',
      onlyIconControl:true,
      data: [[${muluData}]], //Thymeleaf后台返回
      click: function (obj) {
        //当前点击的树节点
        var currTreeId = obj.data.id;
        //上一次点击的树节点id
        var beforeTreeId = $('#tree_id').val();
        //对比前后id，不相同时移除上一个节点的样式，并设置当前点击的节点样式
        if (currTreeId !== beforeTreeId) {
          $('div [data-id="' + currTreeId + '"] div').eq(1).last().css('background-color', '#AAB5BC');
          $('div [data-id="' + beforeTreeId + '"] div').eq(1).last().css('background-color', '');
          $('#tree_id').val(obj.data.id);
        }
        // 点击之后刷新右侧的标准表格
        document.getElementById("iframe").src="/qa/biaozhun/formalSJBZ?muluId="+ obj.data.id;
      },
    });
    // 绑定点击事件
    $('#layui-btn-insert').on('click', function () {
      layer.open({
        type: 2,
        title: '添加目录',
        id: 'layui-layer-insertMuLu',
        area: ['35%', '40%'],
        content: "/qa/sjbz/muluDetail",
        success: function (layero) {

        }
      });
    });
    $('#layui-btn-update').on('click', function () {
      // 获取绑定的树菜单选中
      var thisSelectValue = $('#tree_id').val();
      if (thisSelectValue != null && thisSelectValue != '') {
        layer.open({
          type: 2,
          title: '修改目录',
          id: 'layui-layer-insertMuLu',
          area: ['35%', '40%'],
          content: "/qa/sjbz/muluDetail?id=" + thisSelectValue,
          success: function (layero) {

          }
        });
        return true;
      } else {
        layer.msg("请选择菜单", {icon: 2, time: 2000, shift: 6});
        return false;
      }
    });

  });

  // 获取所有选中的节点id
  function getCheckedId(data) {
    var id = "";
    $.each(data, function (index, item) {
      if (id != "") {
        id = id + "," + item.id;
      } else {
        id = item.id;
      }
      //item 没有children属性
      if (item.children != null) {
        var i = getCheckedId(item.children);
        if (i != "") {
          id = id + "," + i;
        }
      }
    });
    return id;
  }

  function selectLoad() {
    axios.post('/qa/biaozhun/getMuluSelect', {}, {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(resp => {
      if (resp.data.code == 200) {
        for (var i = 0; i < resp.data.data.length; i++) {
          $("#sjzlbzml").append("<option value=\"" + resp.data.data[i].id + "\">" + resp.data.data[i].title + "</option>");
        }
        layui.form.render("select");
      }
    }).catch(error => {
      console.log(error)
    });
  }
</script>
</body>
</html>